<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>会议报名</title>
    <style>
        body {
            background-color: #F7F7F7;
        }
        * {
            margin: 0;
        }
        .color-block {
            position: absolute;
            top: 0;
            width: 100%;
            height: 30%;
            z-index: -1;
            background-color: #0091FF;
        }

        form {
            margin: 30% auto 0;
            box-sizing: border-box;
            padding: 20px;

            width: 90%;
            background-color: #FFFFFF;
        }

        h2 {
            text-align: center;
            font-weight: 500;
            margin-bottom: 20px;
        }

        #avatarPreview {
            width: 120px;
            height: 140px;
            border: 1.5px solid #E9E9E9;
            background-position: center center;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #avatarPreview img {
            width: 25%;
        }

        #avatar {
            opacity: 0;
            position: absolute;
            top: 0;
            width: 120px;
            height: 140px;
        }

        .avatarBox {
            position: relative;
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
        }

        form p {
            text-align: center;
            font-size: 12px;
            color: #FF4848;
        }

        form input,
        select {
            font-size: 16px;
            border: none;
            padding: 0;
            flex: 1;
            height: 100%;
            outline: none;
        }

        select {
            /*appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;*/
            background-color: #fff;
        }

        .form-group {
            display: flex;
            align-items: center;
            height: 50px;
            border-bottom: 2px solid #ECECEC;
        }

        .form-group label::after {
            content: '*';
            float: inline-start;
            color: #FF0000;
        }

        .form-group label {
            width: 90px;
        }
        ::placeholder{
            color: #CDCDCD;
            font-size: 16px;
        }
        .submit{
            border: none;
            margin-top: 30px;
        }
        .submit input{
            font-size: 16px;
            border-radius: 10px;
            color: #fff;
            background-color: #0091FF;
        }
        #error-msg {
            color: red;
        }
        form input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="color-block"></div>
    <form id="form-member-add" action="" method="post">
        <h2><span th:text="${conference.name}"></span></h2>
        <div class="avatarBox">
            <input type="file" id="avatar" name="avatar" accept="image/*" onchange="previewImage(this)">
            <div id="avatarPreview">
                <img th:src="@{/img/add.png}" alt="">
            </div>
        </div>
        <p>请上传本人照片，务必保证照片清晰且人像完整</p>

        <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" name="name" placeholder="请输入姓名" required>
        </div>
        <div class="form-group">
            <label for="phone">手机号</label>
            <input type="text" id="phone" name="phone" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" pattern="[0-9]*" placeholder="请输入手机号" required>
        </div>
        <div class="form-group">
            <label for="sex">性别</label>
            <select id="sex" name="sex" aria-placeholder="请选择性别" required>
                <option value=""> </option>
                <option value="0">男</option>
                <option value="1">女</option>
            </select>
        </div>
        <div class="form-group">
            <label for="schoolName">所属院校</label>
            <input type="text" id="schoolName" name="schoolName" placeholder="请输入所属院校" required>
        </div>
        <div class="form-group">
            <label for="deptName">所属部门</label>
            <input type="text" id="deptName" name="deptName" placeholder="请输入所属部门" required>
        </div>
        <div class="form-group">
            <label for="job">职务</label>
            <input type="text" id="job" name="job" placeholder="请输入职务" required>
        </div>
        <div class="form-group">
            <div><input type="checkbox" id="remark" name="remark" value="参加24日晚餐">参加24日晚餐</div>
        </div>
        <div id="error" class="error" style="display: none">
            <span id="error-msg"></span>
        </div>
        <div class="form-group submit">
            <input type="hidden" name="conferenceId" th:value="${conference.id}">
            <input type="hidden" id="photo" name="photo" value="">
            <input type="submit" value="提交">
        </div>
    </form>
    <script th:src="@{/js/jquery.min.js?v=3.6.3}"></script>
    <!-- jquery-validate 表单验证插件 -->
    <script th:src="@{/ajax/libs/validate/jquery.validate.min.js?v=1.19.3}"></script>
    <script th:src="@{/ajax/libs/validate/jquery.validate.extend.js?v=1.19.3}"></script>
    <script th:src="@{/ajax/libs/validate/messages_zh.js?v=1.19.3}"></script>
    <script th:inline="javascript">
        let prefix = "/conference/member"
        $("#form-member-add").validate({
            focusCleanup: true,
            ignore: "",
            submitHandler: submitHandler
        });

        function submitHandler() {
            let form = document.getElementById('form-member-add');
            let data = new FormData(form);
            $.ajax({
                url: prefix + "/signup",
                type: 'post',
                data: data,
                cache: false,
                processData: false,
                contentType: false,
                success: function(result) {
                    if (result.code == 0) {
                        window.location.href = prefix + "/signuped"
                    } else {
                        $("#error-msg").text(result.msg);
                        $("#error").show();
                    }
                },
                error: function(e) {
                    console.log(e)
                }
            })
        }
        function previewImage(input) {
            let preview = document.getElementById('avatarPreview');
            let img = preview.querySelector('img');
            if (input.files && input.files[0]) {
                let reader = new FileReader();
                reader.onload = function (e) {
                    preview.style.backgroundImage = 'url(' + e.target.result + ')';
                    img.style.display = 'none';
                }
                reader.readAsDataURL(input.files[0]);
                $("#photo").val("pre");
            } else {
                preview.style.backgroundImage = "";
            }
        }
    </script>
</body>
</html>
